<template>
  <div class="home">
   <input type="text" v-model="msg"
   @keyup.enter="handleEnter(msg)"
   >
   <h1>未完成</h1>
   <div v-for="item of list" :key="item.msg">
     <input type="checkbox" :checked="item.doce" @click="handleDebj(item.msg)">
     {{item.msg}}
     <button @click="handleDetail(item.msg)">删除</button>
   </div>
   <h1>已完成</h1>
   <div v-for="item of done" :key="item.msg">
     <input type="checkbox" :checked="item.doce" @click="handleDebjj(item.msg)">
     {{item.msg}}
     <button @click="handleDea(item.msg)">删除</button>
   </div>
  </div>
</template>

<script>
import { reactive,toRefs } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
  setup(){
    const state =reactive({
      msg:"",
      list:JSON.parse(localStorage.getItem('list'))|| [],
      done:JSON.parse(localStorage.getItem('done'))|| [],
      handleEnter(msg){
        var list =this.list
        if(!list.includes(msg)){
          list.push({msg,doce:false})
          this.msg=""
        }else{
          alert("已经有这个值了")
          this.msg=""
        }
      },
      handleDetail(val){
        this.list =this.list.filter(item=>{
          return item.msg !==val
        })

      },
      handleDebj(val){
        this.list =this.list.filter(item=>{
          if(item.msg==val){
            item.doce =!item.doce
            this.done.push(item)
          }
          return item.doce ==false
        })

      },
      handleDea(val){
        this.done =this.done.filter(item=>{
          return item.msg !=val
        })

      },
      handleDebjj(val){
        this.done =this.done.filter(item=>{
          if(item.msg==val){
            item.doce =!item.doce
            this.list.push(item)
          }
          return item.doce ==true
        })

      }
    })
    // onMounted(()=>{
    //    var list =localStorage.getItem('list') || []
    //     var done =localStorage.getItem('done') || []
    //     if(list){
    //         this.list =JSON.parse(list)
    //     }if(done){
    //         this.done =JSON.parse(done)
    //     }
    // })
    watch(state , () => {
      localStorage.setItem('list' , JSON.stringify(state.list))
      localStorage.setItem('done' , JSON.stringify(state.done))
    })
    const refState =toRefs(state)
    return{
      ...refState
    }
  }
  
}
</script>
